<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="keywords" content="BPMN"/>
    <meta name="description" content="BPMN"/>
    <meta name="author" content="小柒2012" />
    <meta name="site" content="https://blog.52itstyle.vip" />
    <title>BPMN</title>
    <link rel="stylesheet" th:href="@{/iview/styles/iview.css}">
    <script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
	<script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
	<script th:src="@{/layer/layer.js}" type="text/javascript"></script>
	<script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
	<script th:src="@{/common.js}" type="text/javascript"></script>
</head>
<body>
<div   id="app"  v-cloak style="margin: 10px">
			<div style="margin-bottom: 6px">
				<i-input  placeholder="输入要查询的关键字" vm-model="bpmn.content" style="width: 300px"></i-input>
				<i-button type="primary" icon="ios-search" >搜索</i-button>
				<i-button type="primary"  icon="md-refresh" >重置</i-button>
				<i-button style="float: right;" type="primary"  @click="add()" icon="md-add" >新增</i-button>
			</div>
			<template> 
			<i-table   :content="self"  :columns="tableTitle"  :data="userData"></i-table>
		 	<br>
			<Page style="float: right;"  :current="user.pageNo"  :total="tableSize" :page-size="user.pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page> 
		</template>
</div>
<script th:src="@{/localstorage/jquery.utils.js}"></script>
<script th:src="@{/localstorage/localstorage.js}"></script>
<script>
		var vm = new Vue({
			el: '#app',
			data:{
				tableTitle : [ {
                    type: 'index',
                    title : "序号",
                }, 
				{
					key : "username",
					title : "账号",
				},{
					key : "nickname",
					title : "姓名",
				},{
					key : "email",
					title : "邮箱",
				},{
					key : "gmtCreate",
					title : "创建时间",
				},{
			    	title : '操作',
			    	key : 'action',
			    	width : 300,
			    	align : 'center',
			    	render : function(h, params) {
			    		var functionList = [];
						var edit = h('Button', {
							props : {
								type : 'primary',
								size : 'small',
							},
							style : {
								marginRight : '8px'
							},
							on : {
								click : function() {
									vm.edit(params.row.id);
								}
							}
						}, '修改');
						functionList.push(edit);
						var remove = h('Button', {
							props : {
								type : 'primary',
								size : 'small',
							},
							style : {
								marginRight : '8px'
							},
							on : {
								click : function() {
									vm.remove(params.row.id);
								}
							}
						}, '删除');
						functionList.push(remove);
						var reset = h('Button', {
							props : {
								type : 'primary',
								size : 'small',
							},
							style : {
								marginRight : '8px'
							},
							on : {
								click : function() {
									vm.reset(params.row.id);
								}
							}
						}, '密码重置');
						functionList.push(reset);
			    		return h('div',{
			    		   
			    	    }, functionList);
			    	}
			    }],
				userData:[],
				user : {
					pageSize : 10,
					pageNo : 1,
					content :''
				},
				tableSize : 50,
			},
			methods: {
				load:function(){
					$.SetForm({
						url :  "/user/list",
						param : this.user,
						success : function(result) {
							vm.tableSize = result.totalCount;
							vm.userData = result.pageData;
						}
					});
				},
				changePage:function(){
					
				},
				changePageSize:function(){
					
				},
				add:function(){
					dialogOpen({
						title: "新增",
						url: "base/user/add.shtml",
						scroll : true,
						width:  "40%",
						height:  "60%",
						yes : function(iframeId) {
							top.frames[iframeId].vm.acceptClick();
						},
					});  
				},
				edit:function(id){
					 dialogOpen({
						title: "修改",
						url: "base/user/add.shtml",
						scroll : true,
						width:  "40%",
						height:  "60%",
						success:function(iframeId){
							top.frames[iframeId].vm.formUser.id = id
							top.frames[iframeId].vm.setForm();
						},
						yes : function(iframeId) {
							top.frames[iframeId].vm.acceptClick();
						},
					});  
				},
				remove:function(id){
				   var index = top.layer.confirm('确认要删除吗？', {
						  btn: ['确认','取消'] //按钮
						}, function(){
						     	$.SaveForm({
									url :  "/user/remove",
									param : {id:id},
									json:true,
									success : function(result) {
									     top.layer.close(index);
										 vm.load();
									}
								});
						});
				},
				reset:function(id){
				   	 dialogOpen({
						title: "修改",
						url: "base/user/reset.shtml",
						scroll : true,
						width:  "25%",
						height:  "25%",
						success:function(iframeId){
							top.frames[iframeId].vm.formUser.id = id
						},
						yes : function(iframeId) {
							top.frames[iframeId].vm.acceptClick();
						},
					});  
				}
			},
			created: function(){
				this.load();
			}
		});						
</script>
</body>
</html>